
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://" + request.getServerName()
				+ ":" + request.getServerPort() + path + "/";
%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>main</title>
<LINK href="./css/style.css" type=text/css rel=stylesheet>
<script src="./js/date.js" type="text/javascript"></script>
<script src="./js/main.js" type="text/javascript"></script>
<script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="./js/jquery.validate.min.js" type="text/javascript"></script>
<script src="./js/validate.js" type="text/javascript"></script>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #5CB7FE;
}
.STYLE1 {font-size: 12px; font-family: arial}
.subscript {font-size: 6px; font-family: arial}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
.STYLE5 {font-size: 12px; color: #FF0000; }
.STYLE6 {
	font-size: 16px;
	font-weight: bold;
}
-->
 </style>
</head>
<script type="text/javascript">
var mydata;
var firstCity;
function showProvinceCityInfo() {
	$("#province").html("<tr><td class=\"STYLE1\">正在加载省份数据...</td><tr>");
	$("#city").html("<tr><td class=\"STYLE1\">正在加城市载数据...</td><tr>");
	$.ajax({  
	    url:'cityInfo.action?t='+Math.random(),  
	    type:'GET',  
	    data:"{}",  
	    dataType:'json',
	    success:function (data) {
	         var i=0;
	         var tr;
	         $(".provinceData").data("provinceData",data);
	         $("#province").html("");
	         $.each(data.cityList,function(province, citys){
	            if(i == 0) {
	            	showFirstCityOfProvince(province);
	            }
	            if(i%12 == 0) {
	                tr=$("<tr></tr>");
	                tr.appendTo("#province");
	            }
	            $("<td><a href='javascript:void(0)' onclick='showFirstCityOfProvince(\"" + province + "\")'>"+province + "</a></td>").appendTo(tr);
	            i++;
	         });
	    },
	    error:function (data) {
	    	$("#province").html("");
	    	$("#province").html("<tr><td class=\"STYLE1\">省份数据数据加载失败！</td><tr>");
	    }  
	});
}

function showFirstCityOfProvince(provinceName) {
    var j=0;
    var tr;
    $("#city").html("");
	var data = $(".provinceData").data("provinceData");
	$.each(data.cityList,function(province, citys) {
	    if (province == provinceName) {
	        var action = 'realTimeEnvData.action';
	    	$(citys).each(function (j, city) {
	    	  if(j == 0) {
	    	  	   showEnvData(action, city);
	    	  }
		      if(j%12 == 0) {
	                tr=$("<tr></tr>");
	                tr.appendTo("#city");
	            }
	            $("<td><a href='javascript:void(0)' onclick='showEnvData(\"" + action + "\",\"" + city + "\")'>"+city + "</a></td>").appendTo(tr);
	            j++;
	    	});
	     return;
	    }
	});
	 
}

function showEnvData(action, city, currentPage, pageSize) {
    var mydata = {};  
	mydata["city"] = city;
	$("#cityText").html(city);
	mydata["currentPage"] = currentPage;
	mydata["pageSize"] = pageSize;
	$("#position").html("<tr></td>正在加载站点数据...</tr></td>");
	$.ajax({
	    url:action+'?t='+Math.random(),  
	    type:'POST',  
	    data:mydata,  
	    dataType:'json',
	    timeout: 10000,
	    success:function (data) {
	         var i=0;
	         var pageBar="";
	         $("#position").html("");
	         $.each(data.latestDataMap,function(key, value){
	         	if (key == "latest") {
	         		$("#latestUpdate").html(value);
	         	}
	         	
	         	if (key == "envData") {
	         	    var tr=$("<tr style='font-weight:bold'></tr>");
	                tr.appendTo("#position");
	                $("<td width=\"18%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">站点</td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">SO<span style=\"font-size: 8px;\">2</span></td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">NO<span style=\"font-size: 8px;\">2</span></td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">CO</td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">O<span style=\"font-size: 8px;\">3</span></td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">O<span style=\"font-size: 8px;\">3</span>-8h</td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">O<span style=\"font-size: 8px;\">3</span>-24h</td>").appendTo(tr);
	                $("<td width=\"8%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">O<span style=\"font-size: 8px;\">3</span>-8h-24h</td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">PM<span style=\"font-size: 8px;\">2.5</span></td>").appendTo(tr);
	                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8D8D8\">PM<span style=\"font-size: 8px;\">10</span></td>").appendTo(tr);
	                var i = 0;
	                $(value).each(function (j, site) {
	                    i++;
		                var tr=$("<tr></tr>");
		                tr.appendTo("#position");
	                	$("<td width=\"18%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+site.position_name+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.SO2==-999?"-":site.SO2)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.NO2==-999?"-":site.NO2)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.CO==-999?"-":site.CO)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.o3==-999?"-":site.o3)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.o3_8H==-999?"-":site.o3_8H)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.o3_24H==-999?"-":site.o3_24H)+"</td>").appendTo(tr);
		                $("<td width=\"8%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.o3_8H_24H==-999?"-":site.o3_8H_24H)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.PM25==-999?"-":site.PM25)+"</td>").appendTo(tr);
		                $("<td width=\"6%\" height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">"+(site.PM10==-999?"-":site.PM10)+"</td>").appendTo(tr);
	                });
	                if (i==0) {
	                	tr=$("<tr><td colspan='10' height=\"25\" align=\"center\" bgcolor=\"#D8EDFF\">没有数据</td></tr>");
	                	tr.appendTo("#position");
	                }
	         	}
	         });
             
	    },
	    error:function (data) {
	    	$("#position").html("");
	    	$("#position").html("<tr></td>站点数据加载失败！</tr></td>");
	    }
	});
}

$(document).ready(function() {
	showProvinceCityInfo();
});

</script>
<body style="overflow-x:hidden">
<table width="100%" height="568" border="0" cellpadding="0"
	cellspacing="0" bordercolor="#D8EDFF">
	<!--DWLayoutTable-->
	<tr>
		<td height="8" colspan="4" valign="top"></td>
		<td width="98%" valign="top"></td>
		<td width="5" valign="top"></td>
	</tr>
	<tr>
		<td height="5" colspan="3" align="right" valign="top"><img
			src="images/icon1.jpg" width="6" height="5" /></td>
		<td colspan="2" valign="top"><img src="images/icon2.jpg" width="100%"
			height="5" /></td>
		<td valign="top"><img src="images/icon3.jpg" width="5" height="5" /></td>
	</tr>
	<tr>
		<td width="7" height="523">&nbsp;</td>
		<td width="5" align="right" valign="top" background="images/icon5.jpg"><img
			src="images/icon5.jpg" width="5" height="5" /></td>
		<td colspan="2" valign="top" bgcolor="#D8EDFF">&nbsp;</td>
		<td valign="top" background="images/main_bg.png">
		
		<table width="100%" border="0" cellpadding="0" cellspacing="0"
			bgcolor="#D8EDFF">
			<!--DWLayoutTable-->
			<tr>
				<td height="30" colspan="3" valign="middle"><span class="STYLE1">&nbsp;[实时数据]</span></td>
				<td width="29">&nbsp;</td>
			</tr>
			<tr>
				<td width="90" height="60">&nbsp;</td>
				<td width="98%" valign="top">
				    <table width="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#D8EDFF">
						<!--DWLayoutTable-->
						<tr>
							<td height="59" colspan="3" align="left" valign="middle" class="STYLE6">
							<fieldset>
			   				 <legend><img alt="省份信息" src="images/search.png"/> &nbsp;&nbsp;<span class="STYLE1">省份信息</span></legend>
								<table width="800" id="province" class="STYLE1 provinceData">
							  </table>
					  	     </fieldset>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="20" colspan="3" align="center" valign="middle" class="STYLE6"></td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="59" colspan="3" align="left" valign="middle" class="STYLE6">
							<fieldset>
			   				 <legend><img alt="城市信息" src="images/search.png"/> &nbsp;&nbsp;<span class="STYLE1">城市信息</span></legend>
								<table width="800" id="city" class="STYLE1">
							  </table>
					  	     </fieldset>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td height="40" colspan="4" align="left" valign="middle" class="STYLE1">
							[ <span id="cityText"></span> ] 实时监测数据(单位:μg/m³; CO为mg/m³) &nbsp;&nbsp;&nbsp;&nbsp; 最新更新:<span id="latestUpdate"></span>
							</td>
						</tr>
						<tr>
							<td colspan="3" align="left" valign="top" class="STYLE1">
								<table width="860" id="position" border=0 cellpadding=0 cellspacing=1
					bgcolor=5cb7fe class="STYLE1">
							  </table>
							<td>&nbsp;</td>
						</tr>
					</table>
				</td>
				<td width="50">&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
</table>
		</td>
		<td valign="top" background="images/icon6.jpg"><img
			src="images/icon6.jpg" width="5" height="100" /></td>
	</tr>

	<tr>
		<td height="5"></td>
		<td valign="top"><img src="images/icon7.jpg" width="5" height="5" /></td>
		<td colspan="3" valign="top"><img src="images/icon8.jpg" width="100%"
			height="5" /></td>
		<td valign="top"><img src="images/icon9.jpg" width="5" height="5" /></td>
	</tr>
	<tr>
		<td height="2"></td>
		<td></td>
		<td width="1"></td>
		<td width="6"></td>
		<td></td>
		<td></td>
	</tr>
</table>
</body>
</html>
